<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="screen-orientation" content="landscape">
    <meta name="x5-orientation" content="landscape">
    <meta name="x5-fullscreen" content="true">
    <title>浪浪山贪吃蛇</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 横屏提示 -->
    <div class="orientation-prompt" id="orientationPrompt">
        <div class="orientation-content">
            <div class="phone-icon">
                📱
            </div>
            <h2>请横屏游戏</h2>
            <p>为了获得最佳游戏体验，请将设备横向放置</p>
            <div class="rotate-hint">🔄</div>
        </div>
    </div>
    
    <!-- UI1: 玩家信息设置页面 -->
    <div class="player-setup-screen" id="playerSetupScreen">
        <div class="setup-container">
            <div class="author-info">
                <p>游戏创作：明德班星星&畅周学校桐桐，技术支持：星星爸爸</p>
            </div>
            <div class="game-title">
                <h1>🐍 浪浪山贪吃蛇</h1>
                <p class="game-subtitle">多人在线贪吃蛇大作战</p>
            </div>
            
            <div class="character-selection">
                <h3>选择你的角色</h3>
                <div class="avatar-grid">
                    <div class="avatar-option selected" data-avatar="0">
                        <div class="avatar-icon">🐗</div>
                        <span>野猪</span>
                    </div>
                    <div class="avatar-option" data-avatar="1">
                        <div class="avatar-icon">🦫</div>
                        <span>黄鼠狼</span>
                    </div>
                    <div class="avatar-option" data-avatar="2">
                        <div class="avatar-icon">🐸</div>
                        <span>青蛙</span>
                    </div>
                    <div class="avatar-option" data-avatar="3">
                        <div class="avatar-icon">🦍</div>
                        <span>大猩猩</span>
                    </div>
                </div>
            </div>
            
            <div class="name-section">
                <input type="text" id="nameInput" placeholder="输入你的昵称" maxlength="20">
                <button id="randomNameBtn">🎲 随机名字</button>
            </div>
            
            <button id="startButton" class="start-game-btn">🚀 开始游戏</button>
            
            <div class="game-rules">
                <h3>🎮 游戏规则</h3>
                <ul>
                    <li class="desktop-only">🎯 使用方向键或WASD控制蛇的移动</li>
                    <li class="mobile-only">👆 使用虚拟按键控制蛇的移动方向</li>
                    <li>🍎 吃食物可以增长并获得分数</li>
                    <li>⚔️ 大蛇可以吃掉小蛇获得更多分数</li>
                    <li>💀 撞到边界或自己会死亡</li>
                    <li>✨ 收集道具获得特殊效果</li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- UI2: 游戏界面 -->
    <div class="game-container" id="gameContainer" style="display: none;">
        <!-- 游戏画布 - 全屏背景 -->
        <canvas id="gameCanvas" width="2400" height="1600"></canvas>
        
        <!-- 左上角：玩家信息 -->
        <div class="game-ui-panel player-info-panel" id="playerInfoPanel">
            <div class="panel-content">
                <div class="player-avatar" id="playerAvatar">🐗</div>
                <div class="player-details">
                    <div class="player-name" id="playerName">未连接</div>
                    <div class="player-stats">
                        <span class="stat-item">💯 <span id="playerScore">0</span></span>
                        <span class="stat-item">📏 <span id="playerLength">3</span></span>
                    </div>
                </div>
            </div>
            <div class="connection-indicator">
                <span id="connectionStatus" class="status-disconnected">🔴 未连接</span>
            </div>
        </div>
        
        <!-- 顶部临时消息提示 -->
        <div class="top-message-notification" id="topMessageNotification" style="display: none;">
            <div class="message-content" id="topMessageContent"></div>
        </div>
        
        <!-- 右上角：排行榜 -->
        <div class="game-ui-panel leaderboard-panel" id="leaderboardPanel">
            <div class="panel-header">
                <h3>🏆 排行榜</h3>
            </div>
            <div class="panel-content">
                <div id="leaderboardList">
                    <div class="loading">等待玩家加入...</div>
                </div>
            </div>
        </div>
        
        <!-- 右下角：虚拟键盘 -->
        <div class="game-ui-panel virtual-controls-panel" id="virtualControlsPanel">
            <div class="virtual-keypad">
                <div class="keypad-row">
                    <div class="virtual-key" id="virtualUp">↑</div>
                </div>
                <div class="keypad-row">
                    <div class="virtual-key" id="virtualLeft">←</div>
                    <div class="virtual-key center-key"></div>
                    <div class="virtual-key" id="virtualRight">→</div>
                </div>
                <div class="keypad-row">
                    <div class="virtual-key" id="virtualDown">↓</div>
                </div>
            </div>
        </div>
        
        <!-- 游戏结束覆盖层 -->
        <div class="game-overlay" id="gameOverlay" style="display: none;">
            <div class="death-screen" id="deathScreen">
                <h2>💀 游戏结束!</h2>
                <p id="deathMessage" class="death-message">游戏结束！</p>
                <div class="final-stats">
                    <p>🏆 最终分数: <span id="finalScore">0</span></p>
                    <p>📏 最终长度: <span id="finalLength">0</span></p>
                </div>
                <button id="respawnButton" class="respawn-btn">🔄 重新开始</button>
                <button id="backToSetupBtn" class="back-btn">🏠 返回设置</button>
            </div>
        </div>
    </div>
    
    <!-- 全屏模式下的游戏状态面板 -->
    <div class="fullscreen-game-status" id="fullscreenGameStatus">
        <div>游戏时间: <span id="gameTime">00:00</span></div>
        <div>在线玩家: <span id="onlinePlayers">0</span></div>
        <div>按ESC退出全屏</div>
    </div>
    
    <script src="client.js"></script>
</body>
</html>